<!--
 * @Author: your name
 * @Date: 2021-02-28 20:07:23
 * @LastEditTime: 2021-04-03 22:04:31
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \jianfa-admin\src\page\common\components\addMenu.vue
-->
<template>
  <el-dialog
    :title="`添加网址`"
    :visible="visible"
    v-dialogdrag
    class="avue-dialog"
    width="40%"
  >
    <el-form ref="form" :rules="rules" :model="form" label-width="120px">
      <el-form-item prop="url" label="网址url">
        <el-input v-model="form.url" placeholder="请输入网址url"></el-input>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="$emit('update:visible', false)">取 消</el-button>
      <el-button :loading="loading" type="primary" @click="addUrl"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    cid: Number
  },
  data() {
    return {
      form: {
        url: ""
      },
      rules: {
        url: [{ required: true, message: "请输入网址url", trigger: "change" }]
      },
      loading: false
    };
  },

  methods: {
    //添加三级菜单
    addUrl() {
      this.$refs["form"].validate(async valid => {
        if (valid) {
          this.loading = true;
          this.form.cid = this.cid;
          await this.$api.realTime.addUrl({
            ...this.form
          });
          this.loading = false;
          this.$emit("update:visible", false);
          this.$emit("getData");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped></style>
